<template>
  <view class="message-list-page">
    <view class="navbar">
      <view class="navbar-back" @click="navigateBack">
        <image src="/static/images/back-icon.png" mode="aspectFit"></image>
      </view>
      <view class="navbar-title">消息中心</view>
    </view>
    <view class="message-tabs">
      <view class="tab-item" :class="{ active: currentTab === 'all' }" @click="switchTab('all')">
        <text>全部消息</text>
      </view>
      <view class="tab-item" :class="{ active: currentTab === 'system' }" @click="switchTab('system')">
        <text>系统消息</text>
      </view>
      <view class="tab-item" :class="{ active: currentTab === 'order' }" @click="switchTab('order')">
        <text>订单消息</text>
      </view>
      <view class="tab-item" :class="{ active: currentTab === 'promotion' }" @click="switchTab('promotion')">
        <text>促销活动</text>
      </view>
    </view>
    <view class="message-list">
      <view class="message-item" v-for="(item, index) in filteredMessages" :key="item.id" @click="goToDetail(item.id)">
        <view class="message-left">
          <image class="message-icon" :src="item.icon" mode="aspectFit"></image>
          <view class="message-dot" v-if="item.unread"></view>
        </view>
        <view class="message-right">
          <view class="message-top">
            <text class="message-subject">{{ item.subject }}</text>
            <text class="message-date">{{ item.date }}</text>
          </view>
          <text class="message-preview">{{ item.preview }}</text>
        </view>
      </view>
    </view>
    <view class="empty-message" v-if="filteredMessages.length === 0">
      <image src="/static/images/empty-message.png" mode="aspectFit"></image>
      <text>暂无消息</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'all',
      messageList: [
        {
          id: 1,
          type: 'system',
          subject: '平台公告：新用户福利活动',
          date: '2025-05-28',
          preview: '新用户注册即可获得100元优惠券礼包，首次下单满99元立减50元...',
          icon: '/static/images/message-system.png',
          unread: true
        },
        {
          id: 2,
          type: 'order',
          subject: '订单支付成功',
          date: '2025-05-27',
          preview: '您的订单 #202505271540 已支付成功，我们将尽快为您发货！',
          icon: '/static/images/message-order.png',
          unread: false
        },
        {
          id: 3,
          type: 'promotion',
          subject: '限时特惠：夏季新品上市',
          date: '2025-05-26',
          preview: '夏季新品全场8折起，满299元再减50元，快来选购吧！',
          icon: '/static/images/message-promotion.png',
          unread: true
        },
        {
          id: 4,
          type: 'system',
          subject: '账户安全提醒',
          date: '2025-05-25',
          preview: '您的账户于2025-05-25 19:30在新设备上登录，如非本人操作，请立即修改密码！',
          icon: '/static/images/message-system.png',
          unread: true
        }
      ]
    }
  },
  computed: {
    filteredMessages() {
      if (this.currentTab === 'all') {
        return this.messageList;
      }
      return this.messageList.filter(item => item.type === this.currentTab);
    }
  },
  methods: {
    navigateBack() {
      uni.navigateBack();
    },
    switchTab(tab) {
      this.currentTab = tab;
    },
    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/message/detail?id=${id}`
      });
    }
  }
}
</script>

<style>
.message-list-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.message-tabs {
  display: flex;
  background-color: #fff;
  height: 90rpx;
  border-bottom: 1rpx solid #eee;
}

.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
}

.tab-item.active {
  color: #ff4500;
  font-weight: bold;
  position: relative;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background-color: #ff4500;
  border-radius: 2rpx;
}

.message-list {
  padding: 20rpx 0;
}

.message-item {
  display: flex;
  padding: 20rpx 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.message-left {
  position: relative;
  margin-right: 20rpx;
}

.message-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.message-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 20rpx;
  height: 20rpx;
  background-color: #ff4500;
  border-radius: 50%;
}

.message-right {
  flex: 1;
  min-width: 0;
}

.message-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.message-subject {
  font-size: 30rpx;
  font-weight: bold;
  max-width: 480rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-date {
  font-size: 24rpx;
  color: #999;
}

.message-preview {
  font-size: 26rpx;
  color: #666;
  line-height: 1.4;
  max-height: 72rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.empty-message {
  padding-top: 200rpx;
  text-align: center;
}

.empty-message image {
  width: 240rpx;
  height: 240rpx;
  margin-bottom: 30rpx;
}

.empty-message text {
  font-size: 28rpx;
  color: #999;
}
</style>    